<template>
		<view>
			<view :style="{height: height+'rpx'}" class="swiper-container" @touchstart="touchStart" @touchend="touchEnd">
				<view class="swiper-item" v-for="(item, index) in list" :key="index"
				v-if="styleList && styleList.length >0"
				@click="$goPage('/demand/detail')"
				:style="{transform: styleList[index].transform,zIndex: styleList[index].zIndex, opacity: styleList[index].opacity,display:styleList[index].display}"> 
				  <view class="wrap">
				  	<view class="image">
						 <view class="demand-header">
							 	<i class="icon icon-video"></i>
							  <text class="demand-header-time">需求: <text>2023-03-03 22:21</text></text>
								<view class="demand-header-tag">船舶维修保养</view>
						 </view>
						 <view class="demand-content"> 
							 需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求
							 需求需求需求需求需求需求需求需求需求需求需求需求
						 </view>
						 <view class="stat-tag stat-tag-gray">未承接</view>
						 <view class="stat-tag stat-tag-success" v-if="false">已承接</view>
						</view>
				  </view>
				</view>
			</view>
			<!-- 指示器 -->
			<view class="swiper-dot" v-if="styleList && styleList.length > 0">
				<view v-for="(item,index) in list" class="swiper-dot-item"
				:class="{'swiper-dot-item-current': styleList[index].opacity == 1}"></view>
			</view>
		</view>
</template>

<script>      
import { defineComponent, reactive,toRefs, onMounted } from "vue";
	export default defineComponent({
			name:"kevy-swiper",
			props: {
					/**
					 * 图片url列表 
					 */
					list: {
						type: Array,
						default: []
					},
					/**
					 * swiper高度
					 */
					height:{
						type: Number,
						default: 690
					}
			},
			emits: ['click'],
			setup(props,ctx) {
				const data = reactive({
					start: {
										x: 0,
										y: 0
									},
									/**
									 * 每个item样式列表
									 */
					styleList: []
					
				})
				onMounted(()=> {
					if(props.list.length > 0) {
						props.list.forEach((item, index) => {
							data.styleList.push(addStyle(index))
							console.log(data.styleList)
						})
					}
				})
				const addStyle = (idx) => {
								const len = props.list.length;
								if (idx > len / 2) {
									//这里是数组后一半的item放在左边,平移位置由远到近，例如共6个，后2个处理在这里
									var left = len - idx
									return {
										transform: 'scale(' + (1 - left / 10) + ') translate(-' + (left * 97) + '%,0px)',
										zIndex: 9999 - left,
										opacity: 0.8 / left,
										display: idx == len - 1 ? "block" : "none"
									}
								} else {
									//这里是数组前一半item放在右边，平移位置由近到远，例如共6个，前4个处理在这里，这里第一个元素始终放在中间位置
									return {
										transform: 'scale(' + (1 - idx / 10) + ') translate(' + (idx * 97) + '%,0px)',
										zIndex: 9999 - idx,
										opacity: 0.8 / (idx === 0 ? 0.8 : idx),
										display: idx > 1 ? "none" : "block"
									}
								}
							};
							/**
							 * 触摸开始
							 * @param {Object} e
							 */
							const touchStart = (e) => {
								data.start.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
								data.start.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
							};
					    const touchEnd = (e) => {
								var newStyleList = JSON.parse(JSON.stringify(data.styleList))
								let tx = e.changedTouches[0].pageX - data.start.x
								let ty = e.changedTouches[0].pageY - data.start.y
								if (Math.abs(tx) > Math.abs(ty)) {
									//左右方向滑动
									if (tx < 0) {
										// 向左滑动
										var last = [newStyleList.pop()]
										newStyleList = last.concat(newStyleList)
									} else if (tx > 0) {
										// 向右滑动
										newStyleList.push(newStyleList[0])
										newStyleList.splice(0, 1)
									}
								} else {
									//这里就不处理上下方向的事件了，有此需求的同仁可以在这里写逻辑
									//上下方向滑动
									if (ty < 0) {
										// 向上滑动
									} else if (ty > 0) {
										// 向下滑动
									}
								}
								data.styleList = newStyleList
							};
							/**
							 * 当前item点击返回索引下标
							 * @param {Object} idx
							 */
							const itemClick = (idx)=> {
								ctx.emit('click', idx);
							};
				return {
					...toRefs(data),
					addStyle,
					touchStart,
					touchEnd,
					itemClick,
				}
			}
	})
	
</script>

<style lang="scss" scoped>
	.swiper-container {
			box-sizing: border-box;
			width: 100%;
			overflow: hidden;
			position: relative;
	
			.swiper-item {
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				transition: all .5s;
	
				.wrap {
					height: 100%;
					width: 90%;
					margin: 2rpx auto;
					position: relative;
					.image {
						height: 100%;
						width: 100%;
						background-color: #fff;
						border-radius: 10rpx;
						padding: 24rpx;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						opacity: 1;
						border: 1rpx solid rgba(0,0,0,0.05);
						// box-shadow: 0 0 10rpx #333;//加阴影的话去掉注释即可
						.demand-header {
							display: flex;
							height: 34rpx;
							align-items: center;
							.icon {
								font-size: 36rpx;
							}
							&-time {
							  margin-left: 8rpx;
							}
							&-tag {
								height: 32rpx;
								margin-left: 8rpx;
								padding: 2rpx 8rpx;
								border-radius: 6rpx 6rpx 6rpx 6rpx;
								border: 1rpx solid #000000;
								font-size: 20rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #000000;
								line-height: 23rpx;
							}
						}
						.demand-content {
							margin-top: 12rpx;
							overflow: hidden;
							display: -webkit-box;
						  -webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(0,0,0,0.5);
							line-height: 28rpx;
						}
						.stat-tag {
							position: absolute;
							top:0;
							right:0;
							padding: 0 16rpx;
							height: 32rpx;
							background-color: #808080;
							border-radius: 0 24rpx 0 24rpx;
							font-size: 20rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #fff;
							line-height: 32rpx;
						}
						.stat-tag-gray {
							background-color: #808080 ;
						}
						.stat-tag-success {
							background-color: #45D069 ;
						}
					}
					.image-desc{
						font-size: 30rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 100%;
						height: 60rpx;
						padding: 0rpx 20rpx;
						background: rgba(0, 0, 0, 0.3);
						line-height: 60rpx;
						box-sizing: border-box;
						text-align: left;
						position: absolute;
						bottom: 0rpx;
						color: #ffffff;
					}
				}
			}
		}
.swiper-dot {
	display: flex;
	justify-content: center;
	margin-top: 8rpx;
	&-item {
		width: 8rpx;
		height: 8rpx;
		border-radius: 8rpx;
		background: rgba(0,0,0,0.3);
		margin: 0 4rpx;
		&-current {
			background: rgba(0,0,0,1);
		}
	}
}
.demand-card {
	width: 200rpx;
	height: 100rpx;
}
</style>